<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>信息管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
<link href="/style/common_style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js?skin=blue"></script>
<script type="text/javascript" src="/js/commonAll.js"></script>
<script type="text/javascript" src="/js/plugins/jQueryForm/jQueryForm.js"></script>
	<script>
		$(function () {
		    //修改表单的提交方式,就是把表单的提交方式修改为ajax
            $("#editForm").ajaxForm(function (data) {
                //显示那个温馨提示框
                showDialog("操作成功",function () {
					location.href= "/role/list.do";
                });
            });
            //因为是普通的按钮,所以要手动提交表单
			$(".but_submit").click(function () {
				//在表单提交之前.要把右边select下option的所有元素选中
                $(".target option").prop("selected",true);
                //这个是菜单分配的
                $(".target_menu option").prop("selected",true);
				//最后提交表单
				$("#editForm").submit();
            });

			//右移
			$("#select").click(function () {
			    //左边被选中的option作为右边的儿子
                $(".src option:selected").appendTo(".target");
            });
			//全部右移
			$("#selectAll").click(function () {

			    $(".src option").appendTo(".target");
            });
			//左移
			$("#deselect").click(function () {
                $(".target option:selected").appendTo(".src");
            });
			//全部左移
			$("#deselectAll").click(function () {
				$(".target option").appendTo(".src");
            });

			//去重操作(文档在家完毕之后就要执行)
			var arr = $.map($(".target option"),function (val) {
                return val.value;
            });
			$.each($(".src option"),function (index,ele) {
				$.each(arr,function (i,e) {
					if(e == ele.value){
					    $(ele).remove();
					}
                });
            });


			//=========菜单的左右移动=================
            //右移
            $("#selectMenu").click(function () {
                //左边被选中的option作为右边的儿子
                $(".src_menu option:selected").appendTo(".target_menu");
            });
            //全部右移
            $("#selectMenuAll").click(function () {

                $(".src_menu option").appendTo(".target_menu");
            });
            //左移
            $("#deselectMenu").click(function () {
                $(".target_menu option:selected").appendTo(".src_menu");
            });
            //全部左移
            $("#deselectMenuAll").click(function () {
                $(".target_menu option").appendTo(".src_menu");
            });
            //=========菜单的去重操作=================
            var arr = $.map($(".target_menu option"),function (val) {
                return val.value;
            });
            $.each($(".src_menu option"),function (index,ele) {
                $.each(arr,function (i,e) {
                    if(e == ele.value){
                        $(ele).remove();
                    }
                });
            });
        });
	</script>
</head>
<body>
<form id="editForm" action="/role/saveOrUpdate.do" method="post">
	<input type="hidden" name="id" value="${entity.id}">
	<div id="container">
		<div id="nav_links">
			<span style="color: #1A5CC6;">角色编辑</span>
			<div id="page_close">
				<a>
					<img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
				</a>
			</div>
		</div>
		<div class="ui_content">
			<table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
				<tr>
					<td class="ui_text_rt" width="140">角色名称</td>
					<td class="ui_text_lt">
						<input name="name" value="${entity.name}" class="ui_input_txt02"/>
					</td>
				</tr>
				<tr>
					<td class="ui_text_rt" width="140">角色编码</td>
					<td class="ui_text_lt">
						<input name="sn" value="${entity.sn}" class="ui_input_txt02"/>
					</td>
				</tr>
				<tr>
					<td class="ui_text_rt" width="140">权限分配</td>
					<td class="ui_text_lt">
						<table>
							<tr>
								<td>
									<select multiple="true" class="ui_multiselect01 src">
										<c:forEach items="${pers}" var="permission">
											<option value="${permission.id}">${permission.name}</option>
										</c:forEach>
									</select>
								</td>
								<td align="center">
									<input type="button" id="select" value="-->" class="left2right"/><br/>
									<input type="button" id="selectAll" value="==>" class="left2right"/><br/>
									<input type="button" id="deselect" value="<--" class="left2right"/><br/>
									<input type="button" id="deselectAll" value="<==" class="left2right"/>
								</td>
								<td>
									<select multiple="true" name="perId"  class="ui_multiselect01 target">
										<c:forEach items="${entity.permissions}" var="per">
											<option value="${per.id}">${per.name}</option>
										</c:forEach>
									</select>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td class="ui_text_rt" width="140">菜单分配</td>
					<td class="ui_text_lt">
						<table>
							<tr>
								<td>
									<select multiple="true" class="ui_multiselect01 src_menu">
										<c:forEach items="${menus}" var="menu">
											<option value="${menu.id}">${menu.name}</option>
										</c:forEach>
									</select>
								</td>
								<td align="center">
									<input type="button" id="selectMenu" value="-->" class="left2right"/><br/>
									<input type="button" id="selectMenuAll" value="==>" class="left2right"/><br/>
									<input type="button" id="deselectMenu" value="<--" class="left2right"/><br/>
									<input type="button" id="deselectMenuAll" value="<==" class="left2right"/>
								</td>
								<td>
									<select multiple="true" name="menuIds"  class="ui_multiselect01 target_menu">
										<c:forEach items="${entity.systemMenus}" var="m">
											<option value="${m.id}">${m.name}</option>
										</c:forEach>
									</select>
								</td>
							</tr>
						</table>
					</td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td class="ui_text_lt">
						&nbsp;<input type="button" value="确定保存" class="ui_input_btn01 but_submit"/>
						&nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
					</td>
				</tr>
			</table>
		</div>
	</div>
</form>
</body>
</html>